<template>
  <div class="check-steps">
    <div class="step first" @click="choose(1)" :class="{chooseBtn:active===1}"></div>
    <div class="arrow"></div>
    <div class="step two">
      <ul>
        <li class="step mfirst" @click="choose(5)" :class="{chooseBtn:active===5}"></li>
        <li class="step mtwo" @click="choose(6)" :class="{chooseBtn:active===6}"></li>
        <li class="mthree">
          <div class="step" @click="choose(7)" :class="{chooseBtn:active===7}"></div>
          <div></div>
          <div class="step" @click="choose(8)" :class="{chooseBtn:active===8}"></div>
        </li>
      </ul>
    </div>
    <div class="arrow"></div>
    <div class="step three" @click="choose(3)" :class="{chooseBtn:active===3}"></div>
    <div class="arrow"></div>
    <div class="step four" @click="choose(4)" :class="{chooseBtn:active===4}"></div>
  </div>
</template>


<script>
  import checkInApi from '../../service/member/checkInApi';
  export default {
    props:["stepData","currentMemberObj","isAdd"],
    data() {
      return {
        active:0,
        activeName:'',
        memberObjs:{
          "actId": 0,
          "dateApplication": "2017-11-12",
          "gender": 0,
          "sex":"男",
          "memberId": 1,
          "memberName": "罗勇",
          "memberNo": "string",
          "moveType": 0,
         "remarkArr": ["inApply_InAssessment","inApply_servicePlan"],
          "runId": "string",
          "taskIdArr": ["11","22","33","44"],
          "taskKeyArr": [ "inApply_examination","inApply_InAssessment","inApply_servicePlan","inApply_bedAppointment"],
          "taskNameArr": ["体检报告","入住评估","服务计划","床位预约"]
        },
      }
    },
    methods: {
      init(){
        this.transform();
        console.debug(this.currentMemberObj)
      },
      transform(){
        switch (this.stepData){
          case "application":
            this.active = 1;
            break;
          case "audit":
            this.active = 3;
            break;
          case "confirm":
            this.active = 4;
            break;
          case "medicalReport":
            this.active = 5;
            break;
          case "bedSpace":
            this.active = 6;
            break;
          case "ability":
            this.active = 7;
            break;
          case "planMake":
            this.active = 8;
            break;

        };
      },

      choose(val){
        switch (val){
          case 1:
            this.activeName = "application";
            this.$router.push({name:"checkInProcess01",params:{memberId:this.currentMemberObj.memberId}});
            break;
//          case 4:
//            this.activeName = "confirm";
//            this.$router.push({name:"checkInProcess04",params:{memberId:this.currentMemberObj.memberId}});
//            break;
          case 5:
            this.activeName = "medicalReport";
            if(!this.isAdd){
              console.debug(this.currentMemberObj);
              this.$router.push({name:"checkInProcess02",params:{memberObj:this.currentMemberObj}});
            };
            break;
          case 6:
            this.activeName = "bedSpace";
            if(!this.isAdd){
              this.$router.push({name:"checkInProcess02",params:{memberObj:this.currentMemberObj}});
            };
            break;
          case 7:
            this.activeName = "ability";
            if(!this.isAdd){
              this.$router.push({name:"checkInProcess02",params:{memberObj:this.currentMemberObj}});
            };
            break;
          case 8:
            this.activeName = "planMake";
            if(!this.isAdd){
              this.$router.push({name:"checkInProcess02",params:{memberObj:this.currentMemberObj}});
            };
            break;
//          case 3:
//            this.$router.push({name:"checkInProcess03",params:{memberObj:this.currentMemberObj}});
//            break;
        };
        this.$emit("updateOption",this.activeName);
      },
    },
    watch: {
      stepData() {
        this.transform();
      }
    },
    components: {

    },
    mounted() {

      this.init()
    }
  }
</script>


<style>
  .check-steps{
    width: 1000px;
    padding: 20px 0;
    margin: 0 auto 50px!important;
    margin-top: 20px;

  }
  .check-steps .step{
    display: inline-block;
    width: 174px;
    height: 46px;
  }
  .check-steps .arrow{
    display:inline-block;
    width: 34px;
    height: 21px;
    background: url("../../img/arrow.png") no-repeat;
    margin: -10px 15px 0;
    vertical-align: middle;
  }
  .check-steps .step.first{
    background: url("../../img/check-01.png") no-repeat;
  }

  .check-steps .step.three{
    background: url("../../img/check-03.png") no-repeat;
  }
  .check-steps .step.four{
    background: url("../../img/check-04.png") no-repeat;
  }
  .check-steps .step.two{
    width: 256px;
    position: relative;
  }
  .check-steps .step.two ul{
    position: absolute;
    top:-49px;
    left: 39px;
    z-index: 0;
  }
  .check-steps .step.two ul li{
    width: 300px;
    height: 46px;
    padding: 2px 0px;
  }
  .check-steps .step.two ul li.mfirst{
    background: url("../../img/check-02-01.png") no-repeat;
  }
  .check-steps .step.two ul li.mtwo{
    background: url("../../img/check-02-02.png") no-repeat;
  }
  .check-steps .step.two ul li.mthree{
    position: absolute;
    left:-25px;
  }
  .check-steps .step.two ul li.mthree div{
    width: 100px;
    height: 46px;
    display: inline-block;

  }
  .check-steps .step.two ul li.mthree div:first-child{
    background: url("../../img/check-02-03-01.png") no-repeat;
  }
  .check-steps .step.two ul li.mthree div:nth-child(2){
    width: 14px;
    background: url("../../img/sarrow.png") no-repeat;
  }
  .check-steps .step.two ul li.mthree div:last-child{
    background: url("../../img/check-02-03-02.png") no-repeat;
  }
  .check-steps .step.chooseBtn{
    background-position-y: -54px!important;
  }

</style>
